<template>
    <div class="index-lists">
        <el-card class="!border-none" shadow="never">
            <el-page-header class="mb-4" :content="backTitle" @back="$router.back()" />
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="标题" prop="title">
                    <el-input class="w-[280px]" v-model="queryParams.title" />
                </el-form-item>
                <el-form-item label="审核模式" prop="is_audit">
                    <el-select
                        v-model="queryParams.is_audit"
                        class="w-[280px]"
                        clearable
                    >
                        <el-option label="全部" value="-1" />
                        <el-option label="审核中" value="1" />
                        <el-option label="投放中" value="0" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <div>
                <el-button v-perms="['client:source:add']" type="primary" @click="handleAdd()">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    新增
                </el-button>
            </div>
            <el-table
                class="mt-4"
                size="large"
                v-loading="pager.loading"
                :data="pager.lists"
            >
                <el-table-column label="外推编号" prop="source_id" min-width="100" />
                <el-table-column label="广告账户id" prop="account_id" min-width="100" />
                <el-table-column label="标题" show-overflow-tooltip prop="title" min-width="100" />
                <el-table-column label="应用渠道" prop="channel" min-width="100">
                    <template #default="{ row }">
                    {{ getChannelName(row.channel) }}
                    </template>
                </el-table-column>
                <el-table-column label="应用标识" show-overflow-tooltip prop="package_name" min-width="100" />
                <el-table-column label="短剧标识" prop="drama_id" min-width="100" />
                <el-table-column label="剧集标识" prop="series_id" min-width="100" />
                <el-table-column label="充值金额" prop="recharge" min-width="100">
                    <template #default="{ row }">
                        <span style="color: #F56C6C;">{{ row.recharge }}</span>
                    </template>
                </el-table-column>
<!--                <el-table-column label="pv" prop="pv" min-width="50">-->
<!--                    <template #default="{ row }">-->
<!--                        <span style="color: #409EFF;">{{ row.pv }}</span>-->
<!--                    </template>-->
<!--                </el-table-column>-->

<!--                <el-table-column label="uv" prop="uv" min-width="50">-->
<!--                    <template #default="{ row }">-->
<!--                        <span style="color: #67C23A;">{{ row.uv }}</span>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="屏蔽用户数" prop="shield_num"  min-width="110" />-->
                <el-table-column label="审核模式" prop="is_audit" min-width="100">
                    <template #default="{ row }">
                        <el-tag :type="row.is_audit === 1 ? 'danger' : 'success'">
                            {{ row.is_audit === 1 ? '审核中' : '投放中' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="create_time" min-width="100" />
                <el-table-column label="更新时间" prop="update_time" min-width="100" />
                <el-table-column label="操作" width="160" fixed="right">
                    <template #default="{ row }">
                        <el-button
                            v-perms="['client:source:edit']"
                            type="primary"
                            link
                            @click="handleEdit(row)"
                        >
                            编辑
                        </el-button>
                        <el-button type="success" link @click="openCall(row)">上户</el-button>
                        <el-button
                            v-perms="['client:source:del']"
                            type="danger"
                            link
                            @click="handleDelete(row.source_id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup
            v-if="showEdit"
            ref="editRef"
            @success="getLists"
            @close="showEdit = false"
        />
    </div>

    <el-drawer v-model="drawer.show" title="上户信息">
        <div class="mb-2">
            <span>小程序名称: </span> <span>{{ drawer.app_config.Title }}</span>
        </div>
        <div class="mb-3">
            <span>小程序Appid: </span> <span>{{ drawer.app_config.AppId }}</span>
        </div>
        <div class="mb-3">
            <span>小程序包名: </span> <span>{{ drawer.app_config.PackageName }}</span>
        </div>
        <div class="mb-3">
            <span>路径参数: </span>  <p style="white-space: pre-wrap;overflow-wrap: break-word">{{ drawer.path }}</p>
        </div>
        <el-divider />
        <div class="mb-3">
            <span>中转链接: </span> <p style="white-space: pre-wrap;overflow-wrap: break-word">{{ drawer.link_url }}</p>
        </div>
        <el-divider />
        <div class="mb-4" style="width: 100%">
            <span>监测链接: </span> <p style="white-space: pre-wrap;overflow-wrap: break-word">{{ drawer.listening }}</p>
        </div>
        <div class="mb-4" style="width: 100%">
            <span>电商监测链接: </span> <p style="white-space: pre-wrap;overflow-wrap: break-word">{{ drawer.listening_goods }}</p>
        </div>
    </el-drawer>

</template>
<script lang="ts" setup name="source">
import { sourceAdDelivery, sourceDelete, sourceLists } from '@/api/client/source'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
import { useDictData } from '@/hooks/useDictOptions'
const { query } = useRoute()
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const showEdit = ref(false)
const queryParams = reactive({
    account_id: String(query.account_id),
    title: '',
    is_audit: '-1',
})

const backTitle = ref(query.account_title  + '【' + query.account_id +'】' )

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: sourceLists,
    params: queryParams
})


interface DictItem {
    value: string | number
    name: string
}

interface ChannelDictData {
    channel: DictItem[]
}

const channelType = useDictData<ChannelDictData>(['channel'])

const getChannelName = (channelValue: string | number): string => {
    // 处理字典数据未加载完成的情况
    if (!channelType.dictData.channel) {
        return String(channelValue)
    }

    // 查找匹配的渠道名称
    const channel = channelType.dictData.channel.find(item =>
        String(item.value) === String(channelValue)
    )

    // 返回渠道名称或原始值
    return channel ? channel.name : String(channelValue)
}

const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add',{account_id: query.account_id})
}

const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.getDetail(data)
}

const handleDelete = async (source_id: number) => {
    await feedback.confirm('确定要删除？')
    await sourceDelete({ source_id })
    feedback.msgSuccess('删除成功')
    getLists()
}

onMounted(() => {
    getLists();
})


const drawer = reactive({
    path: '',
    listening: '',
    listening_goods: '',
    link_url: '',
    app_config: {
        Title: '',
        AppId: '',
        PackageName: '',
    },
    show: false ,
})
async function openCall(res:any) {
    const data = await sourceAdDelivery({
        source_id: res.source_id
    })
    console.log("sourceAdDelivery:",data)
    drawer.show = true

    drawer.path = data.path
    drawer.listening = data.listening
    drawer.listening_goods = data.listening_goods
    drawer.link_url = data.link_url
    drawer.app_config.Title = data.app_config.Title
    drawer.app_config.AppId = data.app_config.AppId
    drawer.app_config.PackageName = data.app_config.PackageName
}
</script>
